/** @type {import('tailwindcss').Config} */
export default {
  content: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}'],
  theme: {
    extend: {
      colors: {
        secondary: '#D4DEFE',
        'text-primary': '#262C40',
        'text-secondary': '#8189A3',
        primary: '#432EAB',
        'modal-background': "#BCC3D0"
      },
      spacing: {
        ch: '19.625rem',
        cw: '22.313rem',
        'modal-height': '488px',
        'modal-width': '500px',
        'default-gap': '1.563rem',
        '14px': '14px',
        'container-size': '1280px',
      },
      boxShadow: {
        default: '0px 0px 20px 0px rgba(0, 0, 0, 0.1);',
      },
      fontSize: {
        h2: ['24px', '30px'],
        'modal-p-size': ['18px', '24px'],
        'modal-secondary-p-size': ['16px', '18px'],
      },
      gridTemplateColumns: {
        'modal-grid-cols': 'min-content auto;',
      },
      gridTemplateRows: {
        'modal-grid-rows': 'repeat(5, min-content);',
      },
    },
  },
  plugins: [],
};

